<template>
  <div class="model-file">
    <div
      v-if="
        operateShow == false &&
        (value8.length === 0 ||
          value8[0].fileList == undefined ||
          value8[0].fileList.length == 0)
      "
      @click="showDialog"
      class="model-operate-nodata"
    >
      <Plus class="model-operate-nodata-icon"></Plus>附件上传
    </div>
    <div v-else @click="showDialog" class="model-operate-nodata">
      附件材料已配置，查看
    </div>
    <el-dialog
      v-model="operateShow"
      :title="operateTitle"
      style="height: 600px; position: relative; overflow:hidden: border-box;"
      :beforeClose="closeOprate"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <template #header="{ close, titleId, titleClass }">
        <div class="my-header">
          <div
            style="
              display: flex;
              flex-direction: column;
              align-items: flex-start;
            "
          >
            <div class="model-operate-title">{{ operateTitle }}</div>
            <div class="model-operate-title-hint">
              附件材料配置要求：每个材料下的文件数量限制9个，格式：PDF/mp4，每个文件小于30M
            </div>
          </div>
        </div>
      </template>
      <template #footer>
        <div class="model-operate-footer" style="text-align: center">
          <el-button @click="closeOprate">取消</el-button>
          <el-button type="primary" @click="submitForm">提交</el-button>
        </div>
      </template>
      <div class="model-file-scroll">
        <el-form ref="formRef" :model="value8">
          <div
            v-for="(item, index) in value8.fileList"
            class="model-file-item"
            :key="Math.random()"
          >
            <div class="model-file-item-left">
              <el-form-item
                label="材料名称"
                :prop="`fileList.${index}.attachmentName`"
                :rules="rules.attachmentName"
              >
                <el-input
                  placeholder="请输入"
                  v-model="item.attachmentName"
                  clearable
                />
              </el-form-item>
              <el-form-item
                label=""
                :prop="`fileList.${index}.fileList`"
                :rules="rules.fileList"
                style="margin-top: 1.5rem"
              >
                <el-upload
                  v-model:file-list="item.fileList"
                  action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                  :auto-upload="false"
                  list-type="picture-card"
                  :before-upload="beforeUpload"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                >
                  <el-icon><Plus /></el-icon>
                </el-upload>
              </el-form-item>
            </div>
            <div class="model-file-item-right">
              <el-icon @click="addItem(index)" size="20">
                <Plus class="model-file-item-right-icon" />
              </el-icon>
              <el-icon @click="deleteItem(index)" size="20">
                <Delete class="model-file-item-right-icon"></Delete>
              </el-icon>
            </div>
          </div>
        </el-form>
      </div>
    </el-dialog>
    <el-image-viewer
      v-if="dialogVisible"
      :url-list="dialogImageUrl"
      @close="dialogVisible = false"
    />
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import "@/utils/style/modelStyle.scss";
import { Delete } from "@element-plus/icons-vue";
const value8 = defineModel("value8");
const operateTitle = "附件材料配置";
const operateShow = ref(false);
const formRef = ref(null);
const dialogImageUrl = ref([]);
const dialogVisible = ref(false);
const rules = {
  attachmentName: [
    { required: true, message: "请输入材料名称", trigger: "blur" },
  ],
  fileList: [{ required: true, message: "请上传文件", trigger: "blur" }],
};
//上传才会触发
const beforeUpload = (file) => {
  // 每个材料下的文件数量限制9个，格式：PDF/mp4，每个文件小于30M
  const isLt30M = file.size / 1024 / 1024 < 30;
  //文件类型 pdf mp4
  // console.log(777,file);
  if (!isLt30M) {
    ElMessage.error("上传文件大小不能超过 30MB!");
    return false;
  }
  return true;
};
const handleRemove = (uploadFile, uploadFiles) => {
  // console.log(uploadFile, uploadFiles);
};

const handlePictureCardPreview = (uploadFile) => {
  console.log(666, uploadFile.url, uploadFile);
  if (uploadFile.name.split(".")[1].toLowerCase() == "pdf") {
    window.open(uploadFile.url);
  } else {
    dialogImageUrl.value = [];
    dialogImageUrl.value.push(uploadFile.url);
    dialogVisible.value = true;
  }
};
const closeOprate = () => {
  formRef.value.resetFields();
  operateShow.value = false;
};
const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      ElMessage.success("提交成功");
      // operateShow.value = false;
    } else {
      // ElMessage.error("提交失败");
    }
  });
};
const addItem = (index) => {
  if (value8.value.fileList.length >= 20) {
    ElMessage.error("添加失败，数量已达上限！");
    return;
  }
  value8.value.fileList.splice(index + 1, 0, JSON.parse(JSON.stringify(item)));
};
const deleteItem = (index) => {
  if (value8.value.fileList.length == 1) {
    ElMessage.error("至少保留一项");
    return;
  }
  ElMessageBox.confirm(
    "删除后该附件材料的配置不会被保存，是否确定删除",
    "提示",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  ).then(() => {
    value8.value.fileList.splice(index, 1);
    ElMessage.success("删除成功");
  });
};
const showDialog = () => {
  operateShow.value = true;
};
let item = {
  attachmentName: "",
  fileList: [],
};
onMounted(() => {
  value8.value.fileList = [];
  value8.value.fileList.push(JSON.parse(JSON.stringify(item)));
});
</script>
<style lang="scss"></style>
